<template>
  <yd-ls-box>
    <yd-ls-layout title="个人信息" :tolfurl="urls" :onfoot=false >
      <div class="yd-ls-height"></div>
      <yd-cell-group>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info" arrow>
          <span slot="left">姓名</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="popupname"
            v-model="name"
            readonly
            placeholder="请填写患者的姓名">
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info" @click.native="showsex = true" arrow>
          <span slot="left">性别</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showsex = true"
            v-model="sex"
            readonly
            placeholder="请选择性别">
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info" arrow>
          <span slot="left">年龄</span>
          <yd-datetime
            startDate="1900-01-01"
            endDate="2100-12-31"
            type="date"
            v-model="age"
            initEmit
            slot="right">
          </yd-datetime>
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info"  arrow>
          <span slot="left">地址</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showarea = true"
            v-model="address"
            readonly
            placeholder="请选择所在地区">
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item"  arrow>
          <span slot="left">所患疾病</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showsick = true"
            v-model="sick"
            readonly>
        </yd-cell-item>
      </yd-cell-group>
      <!--展示 姓名-->
      <yd-popup v-model="showname" position="right" width="100%">
        <yd-ls-popup-header
          headname="填写信息"
          btnname="确定"
          @handle-popup-back="popupback"
          @handle-popup-button="confirmName"></yd-ls-popup-header>

        <yd-cell-group>
          <yd-cell-item>
            <input slot="right" type="text" maxlength="15" placeholder="请输入真实姓名" v-model="name">
          </yd-cell-item>
        </yd-cell-group>
      </yd-popup>
      <!--展示 性别-->
      <yd-actionsheet :items="sexitem" v-model="showsex"></yd-actionsheet>
      <!--展示 地址-->
      <yd-cityselect 
                v-model="showarea" 
                :ready="isReady"
                :callback="areafun" 
                :items="district"
                :provance="newProvance"
                :city="newCity"></yd-cityselect>
      <!--展示 所患疾病-->
      <yd-popup v-model="showsick" position="right" width="100%">
        <yd-ls-popup-header headname="所患疾病"
                            @handle-popup-back="showsick = false"></yd-ls-popup-header>

        <yd-search v-model="searchSick"></yd-search>
        <yd-cell-item type="radio" v-for="(items,index) in searchData" :key="index" >
          <span slot="left">{{ items.disease_name }}</span>
          <input slot="right" type="radio" :value="items.disease_name" @click="chooseSick(items.pkid)" v-model="sick"/>
        </yd-cell-item>
      </yd-popup>
      <div class="yd-ls-height"></div>
    </yd-ls-layout>
    <yd-ls-button btnname="保存" @handle-button="save"></yd-ls-button>
  </yd-ls-box>
</template>

<style>

  .yd-ls-info-cell-item .yd-cell-left span:nth-child(1),
  .yd-ls-info-cell-item .yd-cell-left span:nth-child(2) {
    padding-right: .48rem;
  }
  .yd-ls-info-cell-item .yd-cell-left .yd-ls-info-cell-item-placeholder {
    color: #a9a9a9;
  }
  .yd-ls-me-info input,
  .yd-ls-me-info .yd-datetime-input{
    padding-left: .6rem;
  }
</style>
<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsPopupHeader from '../../../components/yd-ls-popup-header.vue'
  import ydLsButton from '../../../components/yd-ls-button.vue'
  import District from 'ydui-district/dist/jd_province_city_id'
  import { mapGetters } from 'vuex'
  import api from '../../../axios/api'

  export default {
    name: 'info',
    data() {
      return {
        urls: 'info.html',
        info: {},
        sickList: {},
        searchSick: '',
        sick: '',
        showsick: false,
        diseaseId: '',
        name: '',
        isname: false,
        showname: false,
        oldname: '',
        sex: '',
        showsex: false,
        sexitem: [
          {
            label: '男',
            callback: () => {
              this.sex = '男';
            }
          },
          {
            label: '女',
            callback: () => {
              this.sex = '女';
            }
          }
        ],
        age: '',
        showarea: false,
        isReady: false,
        address: '',
        newProvance: '',
        newCity: '',
        addressObj: {},
        infoList: {},
        district: District
      }
    },
    computed: {
      searchData() {
        var search = this.searchSick;
        if (search) {
          return this.sickList.filter(function(product) {
            return Object.keys(product).some(function(key) {
              return String(product[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }

        return this.sickList;
      },
      ...mapGetters(['getMeInfo'])
    },
    created() {
      this.getInfo()
    },
    methods: {
      init() {
      },
      getInfo() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.$nextTick(()=>{
          setTimeout(()=>{
            this.axios.get(api.me_info)
              .then(m=>{
                let me_info_data = m.data
                this.infoList = me_info_data.data

                this.name = this.infoList.name
                this.oldname = this.infoList.name
                this.age = this.infoList.age
                this.sex = this.infoList.gender
                this.address = this.infoList.addr
                this.sick = this.infoList.disease_des
                this.newProvance = this.infoList.province
                this.newCity = this.infoList.city
                this.isReady = true // 初始化-选择地区
                this.getSickList()
              }).catch(err=>{
                this.$dialog.loading.close()
                this.$dialog.alert({mes: JSON.stringify(err)})
              })
            },100)
        })
        
        
      },
      getSickList() {
        this.axios.get(api.reg_sick_list)
          .then(m=>{
            let sick_list_data = m.data
            this.sickList = sick_list_data.data
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      popupname() {
        this.showname = true
      },
      popupback() {
        if(!!this.isname){
          this.name = ''
        }else{
          this.name = this.oldname
        }
        this.showname = false
      },
      confirmName () {
        if(!!!this.name) {
          this.notify('请填写姓名！')
          return
        }
        this.oldname = this.name
        this.showname = false
      },
      areafun (ret) {
        this.address = ret.itemName1 + ' ' + ret.itemName2;
        this.addressObj = {
          pname: ret.itemName1,
          cname: ret.itemName2,
          pid: ret.itemValue1,
          cid: ret.itemValue2
        }
      },
      chooseSick(id) {
        this.diseaseId = id
        setTimeout(()=>{
          this.showsick = false
        },100)
      },
      save () {
        if(!!!this.name) {
          this.notify('请填写姓名！')
          return
        }
        let params = {
          mid: this.infoList.mid*1,
          name: this.name,
          sex: this.sex,
          birthday: this.age,
          disease_id: this.diseaseId*1 || this.infoList.disease_id,
          province_id: this.addressObj.pid*1 || this.infoList.province_id,
          province: this.addressObj.pname || this.infoList.province,
          city_id: this.addressObj.cid*1 || this.infoList.city_id,
          city: this.addressObj.cname || this.infoList.city,
          openId: localStorage.openId
        }
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.post(api.me_info_save, params)
          .then(m=>{
            this.$dialog.loading.close()
            this.notify('保存成功')
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      notify(info) {
        this.$dialog.notify({
          mes: info,
          timeout: 1500
        })
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsBox, ydLsLayout, ydLsPopupHeader, ydLsButton }


  }
</script>
